<html dir="ltr" mozdisallowselectionprint moznomarginboxes>
<head>
  <script src="./iv-viewer.js"></script>
  <link rel="stylesheet" href="./iv-viewer.css">
  <style>
	/*
		ImageViewer v 1.1.0
		Author: Sudhanshu Yadav
		Copyright (c) 2015 to Sudhanshu Yadav - ignitersworld.com , released under the MIT license.
		Demo on: http://ignitersworld.com/lab/imageViewer.html
	*/

	/***** image viewer css *****/
	html, body {
		margin: 0;
		padding: 0;
	}
	#iv-container {
		position: fixed;
		background: #0d0d0d;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		display: none;
		z-index: 1000;
	}
	.iv-loader {
		display: none !important;
	}
	.iv-container {
		overflow: hidden;
		width: 100%;
		height: 100%;
	}
	.iv-close {
		width: 32px;
		height: 32px;
		position: absolute;
		right: 20px;
		top: 20px;
		cursor: pointer;
		text-align: center;
		overflow: hidden;
		text-shadow: 0px 0px 3px #6d6d6d;
		-webkit-transition: all ease 200ms;
		-moz-transition: all ease 200ms;
		-o-transition: all ease 200ms;
		transition: all ease 200ms;
	}
	.iv-close:after, .iv-close:before {
		content: "";
		height: 4px;
		width: 32px;
		background: #fff;
		position: absolute;
		left: 0;
		top: 50%;
		margin-top: -2px;
	}
	.iv-close:before {
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.iv-close:after {
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	.iv-close:hover {
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	/***** snap view css *****/
	.iv-snap-view {
		width: 150px;
		height: 150px;
		position: absolute;
		top: 20px;
		left: 20px;
		z-index: 100;
		-webkit-box-sizing: content-box;
		-moz-box-sizing: content-box;
		box-sizing: content-box;
		-webkit-transition: all ease 400ms;
		-moz-transition: all ease 400ms;
		-o-transition: all ease 400ms;
		transition: all ease 400ms;
		opacity: 0;
	}
	.iv-snap-image-wrap {
		display: inline-block;
		position: absolute;
		max-width: 150px;
		max-height: 150px;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		-o-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		overflow: hidden;
	}
	.iv-snap-image {
		position: relative;
	}
	.iv-snap-handle {
		position: absolute;
		border: 1px solid #ccc;
		-webkit-transform: translate3d(0, 0, 0);
		-moz-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		-o-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		-webkit-box-shadow: 0px 0px 0px 200px rgba(0, 0, 0, 0.5);
		-moz-box-shadow: 0px 0px 0px 200px rgba(0, 0, 0, 0.5);
		box-shadow: 0px 0px 0px 200px rgba(0, 0, 0, 0.5);
	}
	/*** zoom slider ***/
	.iv-zoom-slider {
		display: none;
		width: 100%;
		-webkit-box-sizing: content-box;
		-moz-box-sizing: content-box;
		box-sizing: content-box;
		border: 1px solid #666;
		border-top: 0;
		background: rgba(204, 204, 204, 0.1);
		height: 15px;
		position: absolute;
		top: 150px;
		left: -1px;
	}
	.iv-zoom-handle {
		width: 20px;
		height: 15px;
		background: #ccc;
		position: absolute;
	}
	/**** snap view css end *****/
	.iv-image-view {
		position: absolute;
		height: 100%;
		width: 100%;
	}
	.iv-image-wrap {
		display: inline-block;
	}
	.iv-image-wrap:active {
		cursor: move;
	}
	.iv-large-image {
		max-width: 100%;
		max-height: 100%;
		position: absolute;
		-webkit-transform: translate3d(0, 0, 0);
		-moz-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		-o-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	/****** CSS loader by http://projects.lukehaas.me/css-loaders/ *****/
	.iv-loader {
		top: 50%;
		left: 50%;
		border-radius: 50%;
		width: 32px;
		height: 32px;
		z-index: 100;
		margin-top: -16px;
		margin-left: -16px;
		font-size: 5px;
		position: absolute;
		text-indent: -9999em;
		border-top: 1.1em solid rgba(255, 255, 255, 0.2);
		border-right: 1.1em solid rgba(255, 255, 255, 0.2);
		border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
		border-left: 1.1em solid #fff;
		-webkit-transform: translateZ(0);
		-ms-transform: translateZ(0);
		transform: translateZ(0);
		-webkit-animation: load8 1.1s infinite linear;
		animation: load8 1.1s infinite linear;
	}
	.iv-loader:after {
		width: 10em;
		height: 10em;
		border-radius: 50%;
	}
	@-webkit-keyframes load8 {
		0% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}
		100% {
			-webkit-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}
	@keyframes load8 {
		0% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}
		100% {
			-webkit-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}
	@media screen and (max-width: 767px) {
		.iv-snap-view {
			z-index: -1;
			visibility: hidden;
		}
	}
	.fullcontainer_iv {
		height: 100%;
		width: 100%;
		background: #000;
	}
	.fullcontainer_iv .iv-snap-image, .fullcontainer_iv .iv-large-image {
		transition: transform 0.2s;
	}
	.fullcontainer_iv .iv-snap-view {
		top: 50px;
	}
	.fullcontainer_iv .iv-snap-view .iv-snap-image-wrap {
		top: 0;
		left: 0;
		-webkit-transform: none;
		-moz-transform: none;
		-ms-transform: none;
		-o-transform: none;
		transform: none;
	}
	.fullcontainer_iv .options {
		color: #fff;
		position: absolute;
		top: 20px;
		left: 20px;
		box-shadow: 0 0 100px 0px rgba(0, 0, 0, 0.5);
		background: rgba(0, 0, 0, 0.2);
		padding: 5px;
		border-radius: 6px;
	}
	.fullcontainer_iv .options .glyphicon {
		font-size: 18px;
		margin-left: 10px;
	}
	.fullcontainer_iv .options .glyphicon:first-child {
		margin-left: 0px;
	}

	#loader {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 14px;
		opacity: 0.8;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
	}
	
  </style>
</head>
<body>

  <div id="loader" style="display: block;">Loading...</div>
  <img id="canvas" src="" data-high-res-src="" style="max-width: 100%; max-height: 100%" />

  <script type="text/javascript">
    function getUrlParameter(name) {
      name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
      var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
      var results = regex.exec(location.search);
      return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
    };

    var image = document.querySelector('#canvas');
    image.src = getUrlParameter("link");
    image.setAttribute("data-high-res-src", getUrlParameter("link"));
    var viewer = new ImageViewer(image, {snapView: false}); // check options section for supported options
    image.onload = () => document.querySelector("#loader").style.display = "none";

  </script>
</body>
